import 'package:flutter/material.dart';
import 'package:flutter_scaffold/flutter_scaffold.dart';

class NavigationViewPage extends StatefulWidget {
  const NavigationViewPage({super.key});

  @override
  State<NavigationViewPage> createState() => _NavigationViewPageState();
}

class _NavigationViewPageState extends State<NavigationViewPage> {
  var currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("导航栏")),
      body: Text("content"),
      bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(
          splashColor: Colors.transparent, // 水波纹
          highlightColor: Colors.transparent, // 点击高亮
        ),
        child: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Column(
                children: [
                  Container(
                    height: 3,
                    width: double.infinity,
                    decoration: BoxDecoration(
                      color:
                          currentIndex == 0 ? Colors.red : Colors.transparent,
                      borderRadius: BorderRadius.circular(1.5),
                    ),
                  ),
                  Icon(Icons.home),
                ],
              ),
              label: "首页",
            ),
            BottomNavigationBarItem(
              icon: Column(
                children: [
                  Container(
                    height: 3,
                    width: double.infinity,
                    decoration: BoxDecoration(
                      color:
                          currentIndex == 1 ? Colors.red : Colors.transparent,
                      borderRadius: BorderRadius.circular(1.5),
                    ),
                  ),
                  Icon(Icons.publish),
                ],
              ),
              label: "发布",
            ),
            BottomNavigationBarItem(
              icon: Column(
                children: [
                  Container(
                    height: 3,
                    width: double.infinity,
                    decoration: BoxDecoration(
                      color:
                          currentIndex == 2 ? Colors.red : Colors.transparent,
                      borderRadius: BorderRadius.circular(1.5),
                    ),
                  ),
                  Icon(Icons.person),
                ],
              ),
              label: "我的",
            ),
          ],
          selectedItemColor: Colors.red,
          enableFeedback: false,
          currentIndex: currentIndex,
          onTap: (index) {
            currentIndex = index.toInt();
            setState(() {});
          },
        ),
      ),
    );
  }
}
